<template>
    <div class="integralDetailQuery" v-loading="isLoading">
        <cardComponent pageTitle="查询服务类-->积分明细查询">
            <template slot="cardBody">
                <!-- 积分明细查询 -->
                <div class="integralDetailQueryMain">
                    <el-form
                        size="small"
                        :model="formData"
                        label-width="50%"
                        :rules="Formrules"
                        ref="formDatas"
                    >
                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="起始日期:" label-position="left" prop="startDate">
                                    <el-date-picker
                                        v-model="formData.startDate"
                                        type="date"
                                        format="yyyy-MM-dd"
                                        placeholder="请选择起始日期"
                                        :picker-options="startOptions"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="结束日期:" label-position="left" prop="endDate">
                                    <el-date-picker
                                        v-model="formData.endDate"
                                        type="date"
                                        placeholder="请选择结束日期"
                                        format="yyyy-MM-dd"
                                        :picker-options="endtOptions"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-button type="primary" size="small" @click="dialogTable(true)">查询</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>

                <div v-show="dialogVisible" class="dialogVisible">
                    <el-table
                        :data="tableData"
                        width="100%"
                        border
                        stripe
                        class="heard-bg business_table"
                    >
                        <el-table-column label="积分日期" prop="TranDate">
                            <template slot-scope="scope">
                                <span>{{ scope.row.TranDate | getDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="交易金额" prop="TransMoney"></el-table-column>
                        <el-table-column label="积分值" prop="ExchangePoints"></el-table-column>
                        <el-table-column label="交易描述" prop="TransDesc"></el-table-column>
                        <el-table-column label="交易卡号" prop="Trancardno"></el-table-column>
                        <el-table-column label="交易流水号" prop="TranSeq"></el-table-column>
                    </el-table>
                    <div class="footer">
                        <el-button
                            :disabled="currentPageIndex <= 0"
                            type="primary"
                            size="small"
                            @click="handleChangePage('pre')"
                        >上一页</el-button>
                        <el-button
                            :disabled="!nextButtonFlag"
                            type="primary"
                            size="small"
                            @click="handleChangePage('next')"
                        >下一页</el-button>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import moment from 'moment';
import { mapState, mapGetters } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'IntegralDetailQuery',
    components: {
        cardComponent,
    },
    data() {
        return {
            // 起始日期
            formData: {
                startDate: '',
                endDate: '',
            },
            newStart: '',
            NewEnd: '',
            CARNO: '', // 卡号
            cardNumber: '',
            // 积分明细查询表格
            tableData: [],
            dialogVisible: false,
            pagingDataList: [], // 分期付款申请编号(只存每页最后一条记录)
            currentPageIndex: '', // 当前页最后一条记录的申请编号的索引
            nextButtonFlag: false, // ‘下一页’  按钮的显示控制阀
            isLoading: false,
            Formrules: {
                startDate: [
                    { required: true, message: '请选择起始日期', trigger: 'blur' },

                ],
                endDate: [
                    { required: true, message: '请选择结束日期', trigger: 'blur' },

                ],
            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.formData.endDate) {
                        return time.getTime() > new Date(moment(this.formData.endDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.formData.startDate) {
                        return time.getTime() < new Date(moment(this.formData.startDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
        };
    },
    filters: {
        // 拼接日期 时间
        getDate(date) {
            const resDate = moment(`${date}`).format('YYYY-MM-DD');
            return date;
        },
    },
    mounted() {
        this.CARNO = this.cardInfo.CARDNO;
    },
    computed: mapState({
        cardInfo: state => state.common.cardInfo_3004,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,

    }),
    methods: {
        dialogTable(visible) {
            console.log(this.formData);
            this.$refs.formDatas.validate((valid) => {
                if (valid) {
                    let startDate;
                    let endDate;
                    startDate = this.formData.startDate;
                    endDate = this.formData.endDate;
                    const logdateStart = startDate.getTime();
                    const logdateEnd = endDate.getTime();
                    const time3 = logdateEnd - logdateStart;
                    const time4 = 1000 * 3600 * 24 * 183;
                    if (time3 > time4) {
                        this.$alert(
                            '查询时间范围大于六个月,请重新输入！',
                            '提示',
                            {
                                customClass: 'warning', type: 'warning',
                            },
                        );
                    } else {
                        this.newStart = moment(this.formData.startDate).format('YYYYMMDD');
                        this.newEnd = moment(this.formData.endDate).format('YYYYMMDD');
                        this.dialogVisible = visible;
                        this.currentPageIndex = 0;
                        this.getDataInfo();
                    }
                } else {

                }
            });
        },
        getDataInfo() {
            // this.isLoading = true
            // 设置请求参数 -- 6903 交易
            let TranType = '';
            let TranDate = '';
            let Trantime = '';
            let TranSeq = '';
            let RTNID = '';
            if (this.pagingDataList.length) { // 判断翻页上传字段取值
                TranType = this.pagingDataList[this.currentPageIndex].TranType;
                TranDate = this.pagingDataList[this.currentPageIndex].TranDate;
                Trantime = this.pagingDataList[this.currentPageIndex].Trantime;
                TranSeq = this.pagingDataList[this.currentPageIndex].TranSeq;
                RTNID = this.pagingDataList[this.currentPageIndex].RTNID;
            }
            // console.log(this.cardInfo)
            // console.log(this.defaultParams)
            const appBody = {
                CARDNBR: this.CARNO.trim() || '', // 卡号
                OPT: 1, // 1-用卡号查询，按卡号过滤 2-用证件号码查询 3-不匹配卡号查询，返回账户返回
                CUSTNBR: this.cardInfo.CUSTID, // 查询方式为2-证件号码时，必填
                KEYTYPE: this.cardInfo.KEYTYPE, // 以银行在CODES/ETHNC中参数定义为准 查询方式为2-证件号码时，必填
                STARTDATE: this.newStart, // YYYYMMDD
                ENDDATE: this.newEnd, // YYYYMMDD
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                LEVEL: 1, // 查询级别
                INQOPT: 1, // 查询方式，1通过开始日期以及结束日期查询
                Trancardno: this.CARNO.trim(), // 交易卡号
                PointPool: '', // 积分池
                TranType, // 翻页控制使用；首次查询上送空；翻页查询时上送上页返回的最后一条交易类型；
                TranDate, // 翻页控制使用；首次查询上送空；翻页查询时上送上页返回的最后一条记录积分日期
                Trantime, // 翻页控制使用；首次查询上送空；翻页查询时上送上页返回的最后一条记录积分时间
                TranSeq, // 翻页控制使用；首次查询上送空；翻页查询时上送上页返回的最后一条记录交易流水号
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                RESERVE: '', // 保留域
                PurseID: '',
                TRANYM: '',
                CUSTDATA: '',
                RTNID,

            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '6903';
            defaultParams.body.appHead.seqNo = '999999';
            defaultParams.body.appBody = appBody;
            // 6903交易
            this.$post.transModule.trans6903(defaultParams).then((res) => {
                this.isLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, '数据');
                    if (result.sysHead.rspCd == '000000') {
                        if (result.body.appBody.dataList.length > 0) {
                            this.tableData = result.body.appBody;
                            // 判断此次查询数据最后一条记录申请编号是否在已有列表中  没有- 添加
                            const currentAppref = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].APPREF;
                            const newObj = result.body.appBody.dataList[result.body.appBody.dataList.length - 1];
                            const currentPagingData = {
                                TranType: newObj.TranType,
                                TranDate: newObj.TranDate,
                                Trantime: newObj.Trantime,
                                TranSeq: newObj.TranSeq,
                                RTNID: newObj.RTNID,
                            };
                            this.nextButtonFlag = !(result.body.appBody.dataList.length < 10);
                            let flag = false;
                            let currentIndex;
                            this.pagingDataList.forEach((item, index) => { // 判断此次查询数据最后一条记翻页分期付款序号是否在已有列表中
                                if (item.TranType === currentPagingData.TranType) {
                                    flag = true;
                                    currentIndex = index;
                                }
                            });
                            if (flag) { // 存在
                                this.currentPageIndex = currentIndex;
                            } else {
                                this.pagingDataList.push(currentPagingData);
                                this.currentPageIndex = this.pagingDataList.length - 1;
                            }
                        } else {
                            this.$alert(
                                '无此卡片对应数据',
                                '提示',
                                {
                                    customClass: 'error', type: 'error',
                                },
                            );
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(
                            errorMsg,
                            '提示',
                            {
                                customClass: 'error', type: 'error',
                            },
                        );
                        // this.$message.error(result.sysHead.rspMsg);
                        this.tableData = [];
                    }
                } else {
                    this.$alert(
                        '请求失败!',
                        '提示',
                        {
                            customClass: 'error', type: 'error',
                        },
                    );
                }
            });
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                }
                this.getQueryInfo();
            } else { // 切换到下一页
                this.getQueryInfo();
            }
        },
    },
};
</script>

<style lang='scss'>
.integralDetailQuery {
    width: 98%;
    height: 100%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }

        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    //主体内容
    .integralDetailQueryMain {
        width: 100%;
        .el-row {
            margin: 20px 0;
            display: flex;
            text-align: center;
            justify-content: center;
            .timeLabel {
                font-size: 14px;
                margin-right: 15px;
                margin-top: 8px;
            }
            .Notice {
                font-size: 12px;
                color: red;
                margin-top: 10px;
                margin-left: 15px;
            }
        }
    }

    .footer {
        margin-top: 30px;
        text-align: right;
    }
    .dialogVisible {
        margin-top: 20px;
    }
}
</style>
